<template>
  <!-- 导航 -->
    <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
        <el-col :span="24">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>字典管理</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
    </el-row>
  <!-- 搜索栏-->
    <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
        <el-col :span="24">
            <el-form :model="dictQuery" inline>
                <el-form-item label="字典名称">
                    <el-input v-model="dictQuery.dictName"/>
                </el-form-item>
                <el-form-item label="字典类型">
                    <el-input v-model="dictQuery.dictType"/>
                </el-form-item>
                <el-form-item label="字典状态">
                    <el-select style="width: 100px" v-model="dictQuery.dictStatus">
                        <el-option :value="0" label="全部"/>
                        <template v-for="statusItem in dataStatus">
                            <el-option :value="statusItem.dictDataValue" :label="statusItem.dictDataTag"/>
                        </template>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button @click="loadDict" type="primary">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>

  <!-- 工具栏 -->
    <el-row style="margin: 0px 10px;background-color: ghostwhite;padding: 0px 10px">
        <el-col :span="24">
            <el-button-group >
                <el-button  @click="toAddDict" type="primary">新增</el-button>
                <el-button   @click="" type="primary">编辑</el-button>
                <el-button   @click="" type="primary">删除</el-button>
                <el-button   @click="exportDicts" type="primary">导出</el-button>
            </el-button-group>
        </el-col>
    </el-row>

  <!-- 数据列表 -->
    <el-row style="margin: 0px 10px;padding: 0px 15px">
        <el-col :span="24">
            <el-table :data="dicts" border stripe
                      row-key="dictId"
                      ref="dictTable">
                <el-table-column type="selection" width="55"/>
                <el-table-column prop="dictId" label="字典编号"/>
                <el-table-column prop="dictName" label="字典名称"/>
                <el-table-column label="字典类型" prop="dictType">
                    <template #default="scope">
                        <el-link type="primary">{{scope.row.dictType}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间"/>
                <el-table-column prop="taskStatus" label="项目状态">
                    <template #default="scope">
                        <template v-for="status in dataStatus">
                            <el-tag v-if="status.dictDataValue == scope.row.dictStatus">{{status.dictDataTag}}</el-tag>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="330">
                    <template #default="scope">
                        <el-link @click=""  style="margin: 0px 5px" type="primary"><el-icon><Plus /></el-icon>新增</el-link>
                        <el-link @click=""  style="margin: 0px 5px" type="primary"><el-icon><EditPen /></el-icon>编辑</el-link>
                        <el-link style="margin: 0px 5px" type="primary"><el-icon><Delete /></el-icon>删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
  <!--  分页栏 -->
    <el-row style="margin: 0px 10px;padding: 0px 15px">
        <el-col :span="24">
            <el-pagination @change="changePage" background layout="prev, pager, next" :total="total"/>
        </el-col>
    </el-row>
</template>

<script setup>

import {onMounted, ref} from "vue";
import dictRequest from "@/api/dict.js";
let dataStatus = ref([]);
let dictQuery = ref({dictStatus:0});
let dicts = ref([]);
// 总条数，默认0
let total = ref(0);
// 当前页码，默认1
let curPage = ref(1);

/**
 * 分页栏
 * @param newPage
 */
function changePage(newPage){
    curPage.value = newPage;
    loadDict();
}

/**
 * 导出数据的函数
 */
function exportDicts(){
    dictRequest.exportDicts(dictQuery.value,curPage.value,10);
}
/**
 * 加载所有的字典信息
 */
function loadDict(){
  dictRequest.list(dictQuery.value,curPage.value,10,res=>{
      console.log(res);
      total.value = res.data.total;
      dicts.value = res.data.list;
  })
}
async function loadDataStatus(){
    let dicts = await dictRequest.getDictByTypeAsync("data_status");
    dataStatus.value = dicts.data.dictDataList;
}

onMounted(()=>{
    loadDataStatus();
    loadDict();
})

</script>

<style scoped>

</style>